---
interface Props {
  categories: {
    name: string
    slug: string
    count: number
  }[]
}

const { categories } = Astro.props
---

{
  categories.length === 0 ? (
    <div class="text-center text-sm">作者懒得分类🤪</div>
  ) : (
    <div class="space-y-2.5">
      {categories.map((category) => (
        <a class="relative block group" href={`/categories/${category.slug}`}>
          <div class="absolute -z-1 inset-0 rounded-lg bg-accent/10 group-hover:transition group-hover:bg-accent/20 group-hover:scale-105" />
          <div class="px-2.5 py-2 text-sm flex gap-1 select-none">
            <i class="shrink-0 iconfont icon-folder" />
            <span class="grow">{category.name}</span>
            <span class="shrink-0">{category.count}</span>
          </div>
        </a>
      ))}
    </div>
  )
}
